<template>
  <div class="box">
    <HandVue @back="goBack" :left="true" :iconbool="false">
      <p class="head">提交</p>
    </HandVue>
    <div class="section">
      <div class="headImg">
        <img src="https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF" alt />
        <p>更改头像</p>
      </div>
      <div class="info">
        <div>
          <p>用户昵称</p>
          <input type="text" placeholder="发刚回家看了">
        </div>
        <div>
          <p>性别</p>
          <input type="text" placeholder="男">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import HandVue from "../../components/Hand.vue";
import {useRouter} from "vue-router";
const router=useRouter()

function goBack(){
    router.go(-1)
}
</script>

<style scoped>
.box {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.head {
  color: white;
  font-weight: bold;
  font-size: 4.667vw;
}
.section {
  flex: 1;
  background: #ecfdfa;
}
.headImg {
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 4vw;
  margin: 5.333vw;
}
.headImg > img {
  width: 33.333vw;
  height: 33.333vw;
  border-radius: 16.667vw;
}
.headImg > p {
  color: #ff5e81;
  font-weight: bold;
  margin: 5.333vw;
}
.info {
  background: white;
  margin: 5.333vw;
  border-radius: 4vw;
  padding: 0 5.867vw;
}
.info>div{
    display: flex;
    border-bottom: 0.133vw solid #ccc;
}
.info>div:last-child{
    border-bottom: none;
}
.info>div{
    line-height: 13.333vw;
}
.info>div>p:nth-child(1){
    width: 26.667vw;
    font-size: 4vw;
    font-weight: bold;
    line-height: 13.333vw;
}

.info>div>input{
    height: 13.333vw;
    color: #ccc;
    font-size: 3.467vw;
}
</style>